<template>
    <div class="liebiao">
        <div class="lie-one">
            <div class="lie-one-q">返回</div>
            <div class="lie-one-qq">
                <div class="lie-one-qqq"></div>
                <div class="lie-one-w">
                    <div class="lie-one-ww">
                        <div class="lie-one-e">公司</div>
                        <div class="lie-one-ee">{{ info.q }}</div>
                    </div>
                    <div class="lie-one-r">{{ info.q1 }}</div>
                </div>
                <div class="lie-one-t">
                    <div class="lie-one-rr">分配</div>
                    <div class="lie-one-rrr"></div>
                </div>
            </div>
        </div>
        <div class="lie-two">
            <div class="lie-two-q">
                <img src="../../assets/images/search.png" alt="" class="lie-two-qqqq">
                <input type="text" placeholder="请输入走访企业名称" class="lie-two-qqq">
                <div class="lie-two-e">
                    <div class="lie-two-qq"></div>
                    <div class="lie-two-w">搜索</div>
                </div>
            </div>
            <div class="lie-two-ww"></div>
        </div>
        <div class="lie-three">
            <div class="lie-three-q">
                <div class="lie-three-qq">{{ info.w }}</div>
                <div class="lie-three-qqq"></div>
            </div>
            <div class="lie-three-q">
                <div class="lie-three-qq">{{ info.w1 }}</div>
                <div class="lie-three-qqq"></div>
            </div>
            <div class="lie-three-q">
                <div class="lie-three-qq">{{ info.w2 }}</div>
                <div class="lie-three-qqq"></div>
            </div>
            <div class="lie-three-q">
                <div class="lie-three-qq">{{ info.w3 }}</div>
                <div class="lie-three-qqq"></div>
            </div>
        </div>
        <div class="lie-three-qqqq"></div>
        <div class="lie-four">
            <div class="lie-four-q">
                <div class="lie-four-qq">{{ info.w7 }}</div>
                <div class="lie-four-w">
                    <div class="lie-four-e">{{ info.w4 }}</div>
                    <div class="lie-four-ee">
                        <div class="lie-four-eee">{{ info.w5 }}</div>
                        <div class="lie-four-eeee">{{ info.w6 }}</div>
                        <div class="lie-four-eeeee"></div>
                    </div>
                </div>
            </div>
            <div class="lie-four-q">
                <div class="lie-four-qq">{{ info.w7 }}</div>
                <div class="lie-four-w">
                    <div class="lie-four-e">{{ info.w4 }}</div>
                    <div class="lie-four-ee">
                        <div class="lie-four-eee lie-four-aa">{{ info.w8 }}</div>
                        <div class="lie-four-eeee lie-four-a">{{ info.w9 }}</div>
                        <div class="lie-four-eeeee"></div>
                    </div>
                </div>
            </div>
            <div class="lie-four-q">
                <div class="lie-four-qq">{{ info.w7 }}</div>
                <div class="lie-four-w">
                    <div class="lie-four-e">{{ info.w4 }}</div>
                    <div class="lie-four-ee">
                        <div class="lie-four-eee lie-four-aaaa">{{ info.w10 }}</div>
                    </div>
                </div>
            </div>
            <div class="lie-four-q">
                <div class="lie-four-qq">{{ info.w7 }}</div>
                <div class="lie-four-w">
                    <div class="lie-four-e">{{ info.w4 }}</div>
                    <div class="lie-four-ee">
                        <div class="lie-four-eee lie-four-ss">{{ info.w12 }}</div>
                        <div class="lie-four-eeee lie-four-a">{{ info.w6 }}</div>
                        <div class="lie-four-eeeee"></div>
                    </div>
                </div>
            </div>
            <div class="lie-four-q">
                <div class="lie-four-qq">{{ info.w7 }}</div>
                <div class="lie-four-w">
                    <div class="lie-four-e">{{ info.w4 }}</div>
                    <div class="lie-four-ee">
                        <div class="lie-four-eee lie-four-s">{{ info.w11 }}</div>
                        <div class="lie-four-eeee lie-four-a">{{ name }} </div>
                        <div class="lie-four-eeeee"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lie-five" @click=" maskLayer()">
            <div class="lie-five-q">认领</div>
            <div class="lie-five-qq">企业</div>
        </div>
        <div class="lie-six" v-if="uname2" @click=" maskLayer2()">
            <div class="lie-six-q">
                <div class="lie-six-qqq">
                    <div class="lie-six-qq">确认跟进企业</div>
                    <div class="lie-six-qqqq">{{ info.uname }}</div>
                    <div class="lie-six-qqqq">{{ info.uname1 }}</div>
                </div>
                <div class="lie-six-w">
                    <div class="lie-six-ww">取消</div>
                    <div class="lie-six-www">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    /*1. Vue扩展 */
    extends: "", // extends和mixins都扩展逻辑，需要重点放前面
    mixins: [],
    components: {},
    /* 2. Vue数据 */
    props: {},
    model: { prop: "", event: "" }, // model 会使用到 props
    data() {
        return {
            info: {
                q: '高新技术企业',
                q1: '张三 2022-02-11创建',
                w: '待跟进',
                w1: '营销状态',
                w2: '问卷状态',
                w3: '企业问卷',
                w7: '美亚财产',
                w4: '美亚财产保险有限公司江苏分公司苏 州营业部',
                w5: '营销成功',
                w6: '问卷未进行',
                w8: '无需营销',
                w9: '已打卡问卷未作答',
                w10: '待跟进',
                w12: '营销失败',
                w11: '跟进中',
                name: 'item',
                uname: ' 美亚财产保险有限公司江苏分公司',
                uname1: ' 苏州营业部',
            },
            name: '',
            uname2:false,
        };
          
    },
    computed: {},
    watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
    /* 3. Vue资源 */
    filters: {},
    directives: {},
    /* 4. Vue生命周期 */
    created() {
        this.setName('xaio');
        this.getName();
        const a = [1,2,3];
        const a1 = '2,3,4';
        const a2 = true ;
        const a3 = 3;
        const a4 = {
            we : {}
        };  
        console.log(a);                                                               
        console.log(a1);                                                               
        console.log(a2);                                                               
        console.log(a3);  
        setTimeout(() => {
            this.uname2 = true;
        },3000);                                                             
    },
mounted() { },
    destroy() { },
    /* 5. Vue方法 */
    methods: {
        getName() {
            console.log(this.name);
        },
        setName(item) {
            this.name = item;
        },
        maskLayer(){
          this.uname2 = true;
        },
        maskLayer2(){
          this.uname2 = false;
        },
    }
};
</script>
<style scoped lang="scss">
.liebiao {
    height: 857px;

    .lie-one {
        height: 162px;
        background-image: url('../../assets/images/liebiao.png');
        background-repeat: no-repeat;
        background-size: cover;
        overflow: hidden;
    }

    .lie-one-q {
        margin: 45px 0 0 13px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #000000;
    }

    .lie-one-qq {
        margin: 7px 13px 0 13px;
        display: flex;

        .lie-one-qqq {
            width: 32px;
            height: 49px;
            border: 1px solid red;
        }

        .lie-one-w {
            margin: 0 0 0 7px;

            .lie-one-ww {
                display: flex;
                align-items: center;

                .lie-one-e {
                    height: 19px;
                    width: 39px;
                    background: #7EB993;
                    border-radius: 5px;
                    font-size: 12px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 19px;
                }

                .lie-one-ee {
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;
                    margin-left: 5px;
                }
            }

            .lie-one-r {
                font-size: 13px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #5F6269;
                margin-top: 7px;
            }


        }

        .lie-one-t {
            margin-left: auto;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 61px;
            height: 24px;
            background: linear-gradient(90deg, #6BA5F1 0%, rgba(115, 169, 239, 0.81) 100%);
            border-radius: 2px;

            .lie-one-rr {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
            }

            .lie-one-rrr {
                width: 5px;
                height: 8px;
                background: #D8E4FC;
                margin-left: 10px;
            }
        }
    }

    .lie-two {
        margin: -25px 15px 0 12px;
        display: flex;

        .lie-two-q {
            display: flex;
            height: 41px;
            background: #FFFFFF;
            border-radius: 6px;
            width: 298px;
            align-items: center;

            .lie-two-qqqq {
                height: 15px;
                width: 15px;
                margin-left: 13px;
            }

            .lie-two-qqq {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #5F6269;
                margin-left: 5px;
            }

            .lie-two-e {
                margin-left: auto;
                margin-right: 19px;
                display: flex;
                align-items: center;

                .lie-two-qq {
                    width: 1px;
                    height: 20px;
                    background: #C7C7C7;
                    margin-right: 18px;
                }

                .lie-two-w {
                    font-size: 14px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #010101;
                }
            }
        }

        .lie-two-ww {
            width: 41px;
            height: 41px;
            background: #c99494;
            border: 1px solid #F6F6F6;
            box-shadow: 0px 0px 5px 0px rgba(0, 82, 206, 0.06);
            border-radius: 50%;
            margin-left: auto;
        }
    }

    .lie-three {
        height: 40px;
        margin-top: 5px;
        display: flex;
        align-items: center;

        .lie-three-q {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #ECECEC;
            height: 20px;

            .lie-three-qq {
                font-size: 13px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #2C2C2C;
                margin-right: 5px;
            }

            .lie-three-qqq {
                width: 6px;
                height: 4px;
                background: #D9D9D9;
            }
        }
    }

    .lie-three-qqqq {
        height: 7px;
        background: #F6F6F6;
    }

    .lie-four {
        .lie-four-q {
            display: flex;
            margin: 19px 72px 0 12px;

            .lie-four-qq {
                width: 31px;
                height: 31px;
                background: #CB7E68;
                border-radius: 4px;
                font-size: 11px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 15px;
                text-align: center;
            }

            .lie-four-w {
                margin-left: 7px;

                .lie-four-e {
                    font-size: 16px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #000000;
                    line-height: 19px;
                }

                .lie-four-ee {
                    display: flex;
                    margin-top: 6px;

                    .lie-four-eee {
                        width: 63px;
                        height: 19px;
                        background: #7EB993;
                        border-radius: 2px;
                        font-size: 12px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 400;
                        color: #FFFFFF;
                        text-align: center;
                        line-height: 19px;
                        margin-right: 7px;
                    }

                    .lie-four-eeee {
                        width: 75px;
                        height: 19px;
                        background: #FDE9E7;
                        border-radius: 2px;
                        font-size: 12px;
                        font-family: Alibaba PuHuiTi;
                        font-weight: 400;
                        color: #E14D3E;
                        text-align: center;
                        line-height: 19px;
                        margin-right: 7px;
                    }

                    .lie-four-eeeee {
                        width: 38px;
                        height: 19px;
                        background: #FFFFFF;
                        border: 1px solid #69B993;
                        border-radius: 2px;
                    }

                    .lie-four-a {
                        width: 113px;
                        color: #AA7C1B;
                        background: #FBF1DB;
                    }

                    .lie-four-aa {
                        background: #9CACC6;
                    }

                    .lie-four-aaaa {
                        color: #7B58C2;
                        background: #EEE8F9;
                    }

                    .lie-four-ss {
                        background: #EC847C;
                    }

                    .lie-four-s {
                        background: #64A0EA;
                    }
                }
            }
        }
    }

    .lie-five {
        width: 61px;
        height: 61px;
        background: linear-gradient(45deg, rgba(96, 163, 246, 0.82), rgba(67, 151, 253, 0.82));
        box-shadow: 0px 0px 7px 0px rgba(77, 154, 250, 0.8);
        border-radius: 50%;
        margin-left: auto;
        margin-right: 19px;
        margin-top: 63px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .lie-five:hover {
        // transform: rotate(30deg);
        // transform: scale(1.5);
        transform: translateY(-10px);

    }

    .lie-six {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        

        .lie-six-q {
            height: 145px;
            background: #FFFFFF;
            border-radius: 4px;
            margin-top: 240px;
            padding-left: 46px;
            padding-right: 46px;

            .lie-six-qqq {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 22px;
.lie-six-qq{
    font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #838383;
}
.lie-six-qqqq{
    font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color:#000000;
}
            
            }
            .lie-six-w{
                display: flex;
                margin: 20px 15px 0 15px;
                .lie-six-ww{
                    flex: 1;
                    margin-right: 10px;
                    text-align: center;
                    height: 35px;
background: #FFFFFF;
border: 1px solid #CBCBCB;
border-radius: 4px;
font-size: 14px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #848484;
text-align: center;
line-height: 35px;
                }
                .lie-six-www{
                    flex: 1;
                    text-align: center;
                    height: 35px;
                    height: 35px;
background: #4B91E7;
border-radius: 4px;
text-align: center;
line-height: 35px;
font-size: 14px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #FFFFFF;
                }
              
            }
        }
    }
}</style> 